// 微信小程序兼容性样式
// 替换不支持的CSS属性

// 微信小程序不支持的flex gap
@mixin weapp-flex-gap($gap) {
  display: flex;
  gap: $gap;
}

// 微信小程序不支持的vh单位
@mixin weapp-vh($height) {
  height: #{$height * 1334 / 100}rpx; // 基于iPhone 6/7/8 1334px高度
}

// 微信小程序不支持的max-height vh
@mixin weapp-max-vh($height) {
  max-height: #{$height * 1334 / 100}rpx;
}

// 使用兼容的rpx单位
@function vh-to-rpx($vh) {
  @return #{$vh * 1334 / 100}rpx;
}

// 微信小程序专用样式覆盖
.weapp-compatible {
  // 替换所有vh单位为rpx
  .modal-container {
    max-height: vh-to-rpx(80);
    
    &.full-screen {
      height: vh-to-rpx(100);
      max-height: vh-to-rpx(100);
    }
  }
  
  .modal-content {
    max-height: vh-to-rpx(60);
  }
}